<template>
  <div class="shop-cart">
    <div id="box" v-cloak>
      <div class="header">
        <div class="header-div">
          <span>购物车</span>
        </div>
      </div>
      <div class="main">
        <ul class="list">
            <!-- 列表循环 -->
          <li v-for="(item,index) in json" :key="index" @click.capture="mp(index,$event)">
            <!-- 商家 -->
            <p class="list-dp" v-show="item.show">
              <span :class="['yuan1',{bg:item.select}]" @click.stop="dpSelected(index)"></span>
              <span class="dp">{{item.sj}}</span>
            </p>
            <!-- 图片产品名称价格数量展示 -->
            <div class="item" v-show="item.show" v-for="(pl,index) in json[index].items" :key="index">
              <!-- 选择按钮 -->
              <p class="item-select">
                <span :class="[yuan,{bg:pl.select}]"  @click.capture="selected(index,$event)"></span>
              </p>
              <!-- 商品图片 -->
              <div class="item-img">
                <img :src="pl.img" alt="">
              </div>
              <!-- 商品名称 -->
              <div class="item-text" :class="pl.animate">
                <div class="sl">
                  <span @click="reduce(index)">-</span>
                  <input type="text" v-model="pl.sl" @input="nowPrice">
                  <span @click="add(index)">+</span>
                  <!-- <p @click="del(index)">删除</p> -->
                </div>
                <!-- <div  class="Hide" @click="Hide(index)">
                  完成
                </div> -->
              </div>

              <div  class="item-text" :class="pl.animate">
                <p>{{pl.cp}}</p>
                <p>
                  <span class="item-jg">${{pl.jg}}</span>
                  {{pl.kg}}kg
                  <!-- <span  class="bj">编辑</span> -->
                </p>
              </div>
              <p class="item-sl">
                x{{pl.sl}}
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div style="height:100px"></div>
      <div class="footer" style="z-index: 9999">
        <span :class="[yuan,{bg:allSelect}]" @click="AllSelect()"></span>
        <span class="all" >全选</span>
        <span class="hj">合计: ￥{{allPrice}}</span>
        <p class="up" @click='js()'>结算({{allNum}})</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shopCart',
  data() {
    return {
      yuan: 'yuan1',
      yuan1: 'yuan',
      Index: '',
      cpIndex: '',
      allPrice: '0.00',
      allSelect: false,
      Show: -1,
      allNum: 0,
      numid: [],
      // numidobj: {},
      json: [
        {
          sj: '健康是福商城',
          select: false,
          show: true,
          items: [
            {
              id: 3,
              cp: '心相印抽纸 经典系列2层180抽*6包抽取式软包面纸巾',
              jg: 200,
              sl: 2,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i2/690213114/TB2xNf.fxxmpuFjSZFNXXXrRXXa_!!690213114.jpg_100x100q90s150.jpg_.webp',
              kg: '0.91'},
            {
              id: 777,
              cp: '男士背心男 夏季宽肩纯棉背心 运动修身紧身打底无袖T恤青年无袖',
              jg: 100,
              sl: 5,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i4/1025830091/TB2ysmZdXXXXXbVXpXXXXXXXXXX_!!1025830091.jpg_100x100q90s150.jpg_.webp',
              kg: '0.91'}
          ]
        },
        {
          sj: '秀尚化妆品专营店',
          select: false,
          show: true,
          items: [
            {
              id: 34,
              cp: '24k黄金美容棒瘦脸棒电动瘦脸神器面部脸部按摩器提拉紧致强效仪',
              jg: 20,
              sl: 1,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i2/245897709/TB2GLAgtpXXXXb9XXXXXXXXXXXX_!!245897709.jpg_200x200q50s150.jpg_.webp',
              kg: '0.91'},
            {
              id: 32,
              cp: '博倩 发胶喷雾定型男强力持久清香 干胶蓬松啫喱水保湿头发造型女',
              jg: 14.8,
              sl: 2,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i2/690213114/TB2xNf.fxxmpuFjSZFNXXXrRXXa_!!690213114.jpg_100x100q90s150.jpg_.webp',
              kg: '0.91'},
            {
              id: 553,
              cp: '天猫正品！莎贝龙发胶蓬松定型喷雾女士男士发蜡啫喱水干胶420ml',
              jg: 30,
              sl: 6,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i1/1750239480/TB1n8Uxh3nH8KJjSspcXXb3QFXa_!!0-item_pic.jpg_200x200q50s150.jpg_.webp',
              kg: '0.91'}
          ]
        },
        {
          sj: 'HE赫恩化妆品旗店',
          select: false,
          show: true,
          items: [
            {
              id: 2343,
              cp: '男士长袖打底衫韩版潮流体恤圆领修身纯棉男士条纹加厚T恤海魂衫',
              jg: 20,
              sl: 1,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i2/2377477104/TB2cHIHlFXXXXakXpXXXXXXXXXX_!!2377477104.jpg_100x100q90s150.jpg_.webp',
              kg: '0.91'},
            {
              id: 321,
              cp: '买1送1 赫恩男士面膜去黑头痘印送美白补水保湿控油祛痘收缩毛孔',
              jg: 30,
              sl: 2,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i2/693062995/TB1YmjEe0HO8KJjSZFHXXbWJFXa_!!0-item_pic.jpg_100x100q90s150.jpg_.webp',
              kg: '0.91'},
            {
              id: 3333,
              cp: '珍恋纯单方依兰精油10ml依兰花香薰按摩夫妻情趣氛围护发护肤正品',
              jg: 30,
              sl: 6,
              select: false,
              img: 'https://gw.alicdn.com/bao/uploaded/i3/174835/TB2sk.6c6gy_uJjSZSyXXbqvVXa_!!174835.jpg_100x100q90s150.jpg_.webp',
              kg: '0.91'}
          ]
        }
      ]
    }
  },
  methods: {
    nowPrice() {
      this.price()
    },
    // 获取店铺id冒泡事件捕获阶段触发
    mp(dpIndex) {
      this.Index = dpIndex
      // console.log('1---选择的是店铺------' + this.Index)//    console.log(e.currentTarget);
    },
    // 获取商品id
    selected(cpIndex) {
      this.json[this.Index].items[cpIndex].select = !this.json[this.Index].items[cpIndex].select
      var select = this.json[this.Index].items[cpIndex].select
      this.cpIndex = cpIndex
      var length = this.json[this.Index].items.length
      // 商品全部选中，店铺才选中
      for (var i = 0; i < length; i++) { // 叠加积累有false就为false
        select *= this.json[this.Index].items[i].select
      }
      if (select === 1) {
        this.json[this.Index].select = true
      } else this.json[this.Index].select = false
      // 判断商品是否全部选中，是的话，全选也选中
      var json = this.json.length
      var all = true
      for (var j = 0; j < json; j++) {
        all *= this.json[j].select
      }
      if (all === 1) {
        this.allSelect = true
      }
      // console.log("2---店铺----"+this.Index+"商品序列---"+cpIndex);
      // console.log(e.currentTarget);
      this.allSl()// 商品数量
      this.cancel()// 商品没有全部选中就取消全选
      this.price()// 总价
    },
    // 结算商品数量
    allSl() {
      var json = this.json.length
      var js = 0
      for (var i = 0; i < json; i++) {
        var arr = this.json[i].items
        for (var j = 0; j < arr.length; j++) {
          js += this.json[i].items[j].select
        }
      }
      this.allNum = js
    },
    // 计算价格
    price() {
      var all = 0
      var numidObjs = {}
      var numidArr = []
      for (var j = 0; j < this.json.length; j++) { // 点击循环有多少个商家
        var arr = this.json[j].items// 获取商家下面的列表产品
        for (var i = 0; i < arr.length; i++) { // 循环产品列表
          if (arr[i].select === true) { // 列表里面那些为true
            numidObjs = {'num': Number(arr[i].sl), 'id': arr[i].id}
            numidArr.push(numidObjs)
            all += arr[i].jg * arr[i].sl// 为true的价格加起来，为总价
          }
        }
      }
      console.log(numidArr)
      this.allPrice = all.toFixed(2)// 返回数据
    },
    // 选择属于某个商家地所有产品
    dpSelected(index) {
      // 商家选中
      this.json[index].select = !this.json[index].select
      var select = this.json[index].select

      var arr = this.json[index].items// 获取店铺下面的产品数量
      for (var i = 0; i < arr.length; i++) { // 循环产品数量
        if (arr[i].select === false) { // 判断有那些产品未选中
          arr[i].select = true // 选中咯
        }
        if (this.json[index].select === false) { // 当店铺取消全选的时候
          arr[i].select = false // 产品全部没选中
        }
      }
      // var select = true// 创建一个为真的变量
      for (var j = 0; j < this.json.length; j++) {
        if (this.json[j].select === false) { // 如果有商家没选中全选则为false
          this.allSelect = false
        }
        select *= this.json[j].select
      }
      if (select === 1) {
        this.allSelect = true
      }

      this.allSl()// 商品数量
      this.price()
      // console.log(arr.length);
    },
    // 有钱人就全选咯
    AllSelect() {
      this.allSelect = !this.allSelect
      // var selected = this.allSelect

      var dp = this.json.length// 获取店铺数量
      for (var i = 0; i < dp; i++) { // 循环店铺
        var arr = this.json[i].items// 获取每个店铺的商品
        for (var j = 0; j < arr.length; j++) { // 循环每个店铺里面的商品为选中
          if (this.allSelect === true) {
            // var select = this.json[i].items[j].select
            this.json[i].items[j].select = true
          }
          if (this.allSelect === false) {
            this.json[i].items[j].select = false
          }
        }
        if (this.allSelect === true) {
          this.json[i].select = true
        } else {
          this.json[i].select = false
        }
      }
      this.allSl()// 商品数量
      this.price()
    },
    // 商品没有全部选中就取消全选
    cancel() {
      if (this.json[this.Index].items[this.cpIndex].select === false) {
        this.allSelect = false
      }
    },
    // 显示编辑商品
    // show(index) {
    //   this.json[this.Index].items[index].id = index
    //   console.log(this.json[this.Index].items[index].id)
    //   this.json[this.Index].items[index].animate = 'animated bounceInLeft'
    //   // console.log(index)
    // },
    // Hide(index) {
    //   this.json[this.Index].items[index].id = -1
    //   this.json[this.Index].items[index].animate = 'animated bounceInRight'
    //   this.price()
    // },
    // 商品--
    reduce(index) {
      if (this.json[this.Index].items[index].sl <= 1) {
        return
      }
      this.json[this.Index].items[index].sl--
      this.price()
    },
    // 商品++
    add(index) {
      if (this.json[this.Index].items[index].sl > 999999) {
        return
      }
      this.json[this.Index].items[index].sl++
      this.price()
    },
    // del(index) {
    //   this.json[this.Index].items.splice(index, 1)
    //   if (this.json[this.Index].items.length === 0) {
    //     this.json[this.Index].show = false
    //   }
    // },
    // 结算支付
    js() {
      if (this.allPrice === 0) {
        alert('请选择商品')
        return
      }
      alert('老板请支付：' + this.allPrice + '元')
    }
  }
}
</script>

<style>
       * {
    border: 0;
    padding: 0;
    margin: 0;
    font-family: 黑体;
}

body{background: rgb(238,238,238);}
.header{width: 100%;height:50px;background:#fff; }
.header-div{width: 92%;height: 50px;margin: 0 auto;}
.header-div:nth-child(1){font-size: 20px;color: #666;text-align:center;line-height: 50px;}
.footer{width: 100%;height: 50px;background: #fff;position: fixed;bottom:0;z-index: 999;}
.list{list-style-type: none;}
.list li{width: 100%;border-bottom: 1px solid #ccc;}
.yuan{border:1px solid #ccc;width: 20px;height: 20px;display: inline-block;border-radius: 50%;position:relative;top:0.1rem;left: 0.3rem;}
.list-dp{width: 100%; background: #fff;line-height: 0.8rem;font-size: 18px;color: #666;margin: 0 auto;margin-top: 0.2rem}
.dp{margin-left: 5%;line-height: 0.8rem;font-size: 14px;}
.item{width: 92%;height: 1.5rem;display: flex;margin: 0 auto;justify-content:center;align-items:center;}
.item-select{width: 1.2rem;height: 1.5rem;}
.item-img{width: 1.5rem;height: 1.5rem;margin-top: 0.3rem}
.item-img img{width: 100%;}
.item-text{height: 1.5rem;width: 95%;margin-left: 3%;margin-top: 0.35rem;overflow: hidden;}
.item-text p:nth-child(1){color: #666;font-size: 12px;/*padding: 10px;*/}
.item-text p:nth-child(2){color: #999;font-size: 12px;padding-top:0.1rem;}
.item-jg{color: #f40;padding-right:10px;}
.item-sl{color: #999;line-height: 1.5rem;font-size: 12px;}
.yuan1{border:1px solid #ccc;width: 20px;height: 20px;display: inline-block;border-radius: 50%;}
.footer{font-size: 12px;color: #666;display: flex;align-items:center;justify-content:space-around;}
.up{width: 2rem;height: 50px;color: #fff;font-size: 14px;line-height: 50px;text-align: center;background: #f40;margin-right: -6%;}
.all{margin-left: -7%;}
.bg{background: #f40}
.hj{margin-left: 15%}
.bj{color: #999;font-size: 12px;float: right;margin-right: 5%;}
.sl{width: 70%;height: 1.5rem;display: inline-block;font-size: 12px;}
.sl span{font-size: 20px;width: 20%;height: 0.5rem;display: inline-block;text-align: center;}
.sl input{display: inline-block;width: 50%;height: 0.5rem;}
.Hide{width: 30%;height: 1.3rem;background: #f40;display: inline-block;float: right; font-size: 16px;line-height: 1.3rem;text-align: center;color: #fff;}
[v-cloak] {
 display: none;
}
</style>
